<form #valForm="ngForm">
<div *ngIf="data">
	<div class="form-group">
		<label for="data.billingCycle" class="col-lg-2 control-label">{{('crm.component.node.billingCycle1' | translate) || '周期（年）：'}}</label>
		<div class="col-lg-3">
			<ng-select ngModel [items]="select.billingcycle" [required]="true" [(ngModel)]="data.billingCycle" name="data.billingCycle"
				(selected)="getPaymoney($event)" placeholder="{{('crm.component.node.billingCyclePlaceholder' | translate) || '--请选择--'}}"
				[disabled]="data.isDisabled || (data.disabledAttr && data.disabledAttr.indexOf('billingCycle') > -1)" > </ng-select>						
		</div>
		<label for="data.width" class="col-lg-2 control-label">{{('crm.component.node.width' | translate) || '带宽(Mbps)：'}}</label>
		<div class="col-lg-3">
			<ng-select [required]="true" [items]="select.bandwidth" [orphan]="true" [(ngModel)]="data.bandWidth" name="data.bandWidth" #bandWidthSelect
				(selected)="getPaymoney()" placeholder="{{('crm.component.node.widthPlaceholder' | translate) || '--请选择带宽--'}}"
				[disabled]="data.isDisabled || (this.data.disabledAttr && this.data.disabledAttr.indexOf('bandWidth') > -1)">
			</ng-select>
		</div>				
	</div>
	<div class="form-group">
		<label class="col-lg-2 control-label">{{('crm.component.node.slaLevel' | translate) || '网络质量SLA：'}}</label>
		<div class="col-lg-3">
			<label class="radio-inline c-radio">
				<input type="radio" name="data.slaLevel" [disabled]="data.isDisabled" [checked]="data.slaLevel === '1'" (click)="slaClicked('1')"/> 
				<span class="fa fa-check"></span>{{('crm.component.node.slaLevel1' | translate) || '标准'}}
			</label>				
			<label class="radio-inline c-radio">
				<input type="radio" name="data.slaLevel" [disabled]="data.isDisabled" [checked]="data.slaLevel === '2'" (click)="slaClicked('2')"/> 
				<span class="fa fa-check"></span>{{('crm.component.node.slaLevel2' | translate) || '高级'}}
			</label> 
		</div>
		<label for="data.isp.wan.ispName" class="col-lg-2 control-label">{{('crm.component.isp.wan.ispName' | translate) || 'ISP供应商名称：'}}</label>
		<div class="col-lg-3">
			<ng-select [required]="true" [(ngModel)]="data.isp.wan.ispName" [items]="select.isp"
				name="data.isp.wan.ispName" #ispSelect
				(selected)="getPaymoney()" placeholder="{{('crm.component.isp.wan.ispNamePlaceholder' | translate) || '--请选择ISP供应商--'}}" [disabled]="data.isDisabled">
			</ng-select>
		</div>				
	</div>
	<div class="form-group">
		<label for="accessType" class="col-lg-2 control-label">{{('crm.component.isp.wan.accessType' | translate) || '公网接入类型：'}}</label>
		<div class="col-lg-3">
			<ng-select [required]="true" [(ngModel)]="data.isp.wan.accessType" [items]="select.wanAccessType"
				name="data.isp.wan.accessType" #wanAccessTypeSelect
				(selected)="wanAccessTypeSelected($event)"
				placeholder="{{('crm.component.isp.wan.accessTypePlaceholder' | translate) || '--请选择公网接入类型--'}}" [disabled]="data.isDisabled"> </ng-select>
		</div>
		<label for="data.isp.wan.ispWidth" class="col-lg-2 control-label">{{('crm.component.isp.wan.ispWidth' | translate) || '公网接入带宽(Mbps)：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text"
				[(ngModel)]="data.isp.wan.ispWidth" #ispWanIspWidth="ngModel" required
				number name="data.isp.wan.ispWidth" placeholder="{{('crm.component.isp.wan.ispWidthPlaceholder' | translate) || '请输入公网接入带宽'}}" [disabled]="data.isDisabled"/>
		</div>		
	</div>
	<div class="form-group" *ngIf="data.isp.wan.accessType === '1'">
		<label for="data.isp.wan.accessIpAddr" class="col-lg-2 control-label">{{('crm.component.isp.wan.accessIpAddr' | translate) || '静态IP/掩码：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text"
				[(ngModel)]="data.isp.wan.accessIpAddr" #ispWanAccessIpAddr="ngModel"
				required name="data.isp.wan.accessIpAddr" placeholder="A.B.C.D/x" [disabled]="data.isDisabled"/>
		</div>
		<label for="data.isp.wan.accessGateway" class="col-lg-2 control-label">{{('crm.component.isp.wan.accessGateway' | translate) || '网关地址：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text"
				[(ngModel)]="data.isp.wan.accessGateway"
				#ispWanAccessGateway="ngModel" required
				name="data.isp.wan.accessGateway" placeholder="A.B.C.D" [disabled]="data.isDisabled"/>
		</div>
	</div>		
	<div class="form-group">
		<label for="data.equip.postAddress" class="col-lg-2 control-label">{{('crm.component.node.swan.equip.postAddress' | translate) || 'CPE收件地址：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text"
				[(ngModel)]="data.equip.postAddress" #equipPostAddress="ngModel"
				required name='data.equip.postAddress' maxlength=100
				placeholder="{{('crm.component.node.swan.equip.postAddressPlaceholder' | translate) || '请输入CPE收件地址！'}}" [disabled]="data.isDisabled" />
		</div>
		<label for="data.equip.contactName" class="col-lg-2 control-label">
			{{('crm.component.node.swan.equip.contactName' | translate) || '收件人：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text"
				[(ngModel)]="data.equip.contactName" #equipContactName="ngModel"
				required maxlength=10 name="data.equip.contactName" placeholder="{{('crm.component.node.swan.equip.contactNamePlaceholder' | translate) || '请输入收件人！'}}" [disabled]="data.isDisabled" />
		</div>					
	</div>			
	<div class="form-group">
		<label for="data.equip.contactPhone" class="col-lg-2 control-label">
			{{('crm.component.node.swan.equip.contactPhone' | translate) || '联系电话：'}}</label>
		<div class="col-lg-3">
			<input class="form-control" type="text"
				[(ngModel)]="data.equip.contactPhone" #equipContactPhone="ngModel"
				required name="data.equip.contactPhone" [disabled]="data.isDisabled" phoneValidate
				placeholder="{{('crm.component.node.swan.equip.contactPhonePlaceholder' | translate) || '请输入收件人联系电话！'}}" />
		</div>		
	</div>
	<div class="form-group">
		<label for="data.equip.usesAddress" class="col-lg-2 control-label">{{('crm.component.node.usesAddress' | translate) || '使用地址：'}}</label>
		<div class="col-lg-8">
			<div class="row">
				<div class="col-lg-3">
					<ng-select ngModel [items]="provinces" [required]="true" [(ngModel)]="data.equip.province" name="data.equip.province"
						#province (selected)="provinceSelected($event)" placeholder="{{('crm.component.node.usesAddressSelect' | translate) || '--请选择--'}}"
						[disabled]="data.isDisabled" > </ng-select>
				</div>
				<div class="col-lg-3">
					<ng-select ngModel [required]="true" [(ngModel)]="data.equip.city"  name="data.equip.city"
						#city (selected)="citySelected($event)" placeholder="{{('crm.component.node.usesAddressSelect' | translate) || '--请选择--'}}"
						[disabled]="data.isDisabled" > </ng-select>
				</div>
				<div class="col-lg-6">
					<input class="form-control" type="text" [(ngModel)]="data.equip.usesAddress" #equipUsesAddress="ngModel"
						name="data.equip.usesAddress" required placeholder="{{('crm.component.node.usesAddressInput' | translate) || '请输入节点使用地址！'}}" [disabled]="data.isDisabled" 
						maxlength=100/>
				</div>
			</div>
		</div>
	</div>	
	<ncloud-isp ngModel name="data.isp" required [(ngModel)]="data.isp"></ncloud-isp>
	<div class="panel-heading">{{('crm.component.node.swan.service.title' | translate) || '服务信息'}}</div>
	<div class="form-group">	
		<label class="col-lg-2 control-label"></label>
		<div class="col-lg-10">
			<label class="checkbox-inline c-checkbox">
			<input type="checkbox" value="option1" disabled/>
			<span class="fa fa-check"></span>{{('crm.component.node.swan.service.secure' | translate) || '网络安全服务'}}</label>
			<label class="checkbox-inline c-checkbox">
			<input type="checkbox" value="option2" disabled/>
			<span class="fa fa-check"></span>{{('crm.component.node.swan.service.data' | translate) || '网络数据分析服务'}}</label>
		</div>			
	</div>
</div>	
</form>